<template>
  <div class="header">
    <div class="hd-left">
      <span>离职原因</span>
    </div>
    <div class="hd-right">
      <i class="el-icon-warning-outline"></i>
      <span class="c-font-14 c-m-r-5 c-title-color">设置离职原因</span>
      <TsButton
        type="primary"
        size="mini"
        @click="add"
        label="新增"
        perms="resignations:post"
      ></TsButton>
      <el-button type="danger" size="mini" @click="delMultiple">删除</el-button>
    </div>
  </div>
  <div class="table" style="height: calc(100vh - 340px); overflow-y: auto">
    <el-table
      ref="multipleTable"
      :data="menuData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="reason" label="原因"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template #default="scope">
          <TsButton
            perms="resignations:$id:put"
            label="编辑"
            type="text"
            @click="edit(scope.row)"
            icon="el-icon-edit"
            style="color: #0074df"
          ></TsButton>
          <TsButton
            perms="resignations:$id:delete"
            label="删除"
            type="text"
            @click="del(scope.row.id)"
            icon="el-icon-delete"
            style="color: #ff5d5d"
          ></TsButton>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--  分页-->
  <el-pagination
    style="margin: 20px; float: right"
    @size-change="pageSizeChange"
    @current-change="pageCurrentChange"
    :current-page="pageNum"
    :page-size="pageSize"
    layout=" prev, pager, next"
    :total="totalNum"
    background
  >
  </el-pagination>
  <!--    新增对话框-->
  <el-dialog v-model="addDialogVisible" :title="dialogTitle" width="30%">
    <el-form
      label-position="left"
      label-width="100px"
      :model="addForm"
      ref="positionRef"
    >
      <el-form-item label="离职原因" prop="name">
        <el-input
          v-model="addForm.name"
          placeholder="请输入离职原因"
        ></el-input>
      </el-form-item>
      <el-form-item label="离职原因描述" prop="desc">
        <el-input
          type="textarea"
          :rows="2"
          v-model="addForm.desc"
          placeholder="请输入离职原因描述"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitAddData">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import {
  addResignations,
  delMultipleResignations,
  delResignations,
  editResignations,
  getResignations,
} from "../../../../api/system/basic-settingApi";
import commonPageRepository from "../../../../composables/common-page-repository";
import { ElMessage, ElMessageBox } from "element-plus";
import TsButton from "../../../../components/TsButton";

export default {
  name: "Resignations",
  components: { TsButton },
  setup() {
    //表格数据
    const menuData = ref([]);
    const pageSize = ref(50);
    const pageNum = ref(1);
    const totalNum = ref("");
    //对话框显示与隐藏
    const addDialogVisible = ref(false);
    //取消操作
    function cancel() {
      addDialogVisible.value = false;
      positionRef.value.resetFields();
    }
    //新增表单数据
    const addForm = reactive({});
    function getResignationsData() {
      getResignations({
        pageSize: pageSize.value,
        pageNumber: pageNum.value,
      }).then((res) => {
        menuData.value = res.data.content;
        totalNum.value = res.data.totalElements;
      });
    }
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getResignationsData
    );
    const dialogTitle = ref("");
    //新增功能
    function add() {
      dialogTitle.value = "新增";
      addDialogVisible.value = true;
    }
    //提交操作
    function submitAddData() {
      if (userId.value) {
        editResignations(userId.value, {
          reason: addForm.name,
          description: addForm.desc,
        }).then(() => {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          addDialogVisible.value = false;
          positionRef.value.resetFields();
          getResignationsData();
        });
      } else {
        addResignations({
          reason: addForm.name,
          description: addForm.desc,
        }).then(() => {
          ElMessage({
            message: "添加成功",
            type: "success",
          });
          addDialogVisible.value = false;
          positionRef.value.resetFields();
          getResignationsData();
        });
      }
    }
    //用户ID
    const userId = ref("");
    //表单标识符
    const positionRef = ref(null);
    //编辑操作
    function edit(row) {
      dialogTitle.value = "编辑";
      userId.value = row.id;
      addDialogVisible.value = true;
      addForm.name = row.reason;
      addForm.desc = row.description;
    }
    //删除操作
    function del(id) {
      ElMessageBox.confirm("此操作将永久删除该数据吗？是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delResignations(id).then(() => {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            getResignationsData();
          });
        })
        .catch(() => {
          ElMessage({
            message: "取消操作",
            type: "info",
          });
        });
    }
    //多选数据
    const multipleTable = ref([]);
    //多选删除操作
    function delMultiple() {
      if (multipleTable.value.length !== undefined) {
        const ids = [];
        multipleTable.value.map((item) => {
          ids.push(item.id);
        });
        delMultipleResignations(ids).then(() => {
          ElMessage({
            message: "批量删除成功",
            type: "success",
          });
          getResignationsData();
        });
      } else {
        ElMessage.warning("请先选择数据后再操作");
      }
    }
    function handleSelectionChange(val) {
      multipleTable.value = val;
    }
    onMounted(() => {
      getResignationsData();
    });
    return {
      pageSizeChange,
      menuData,
      pageNum,
      pageSize,
      totalNum,
      pageCurrentChange,
      add,
      addDialogVisible,
      addForm,
      submitAddData,
      edit,
      positionRef,
      cancel,
      del,
      handleSelectionChange,
      multipleTable,
      delMultiple,
      dialogTitle,
    };
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
